<template>
    <el-dialog title="添加员工" :visible="goodsListVisible"  @update:visible="bol=>$emit('update:goods-list-visible',bol)">
        <el-form >
            <el-form-item label="员工姓名:" label-width="120px">
                <el-input v-model="goodsListForm.goodsName"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工类别:" label-width="120px">
                <el-select @change="goodsListForm.shopId='';$store.dispatch('getShopListByTypeId',goodsListForm.shopTypeId)"
                           v-model="goodsListForm.shopTypeId" placeholder="请选择部门类别">
                    <el-option
                            v-for="item in $store.state.shop.allShopTypeList"
                            :key="item._id"
                            :value="item._id"
                            :label="item.shopTypeName"
                    ></el-option>
                </el-select>
                <el-select @change="goodsListForm.goodsId='';$store.dispatch('getGoodsListByTypeId',goodsListForm.shopId)" v-model="goodsListForm.shopId" placeholder="请选择部门">
                    <el-option v-for="item in $store.state.shop.shopListByID"
                               :key="item._id"
                               :value="item._id"
                               :label="item.shopName"
                    ></el-option>
                </el-select>
                <el-select v-model="goodsListForm.goodsId" placeholder="请选择员工类别">
                    <el-option v-for="item in $store.state.goods.goodsListByTypeId"
                               :key="item._id"
                               :value="item._id"
                               :label="item.goodsTypeName"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item
                    label="员工工资:"
                    label-width="120px"
                    prop="price">
                <el-input type="age" v-model.number="goodsListForm.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否是优秀员工:" label-width="120px">
                <el-radio v-model="goodsListForm.isTop" :label="true">是</el-radio>
                <el-radio v-model="goodsListForm.isTop" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="是否全勤:" label-width="120px">
                <el-radio v-model="goodsListForm.ishot" :label="true">是</el-radio>
                <el-radio v-model="goodsListForm.ishot" :label="false">否</el-radio>
            </el-form-item>


            <el-form-item label="员工照片:" label-width="120px">
                <el-upload
                        :on-success="success"
                        name="goodsPic"
                        :data="goodsListForm"
                        ref="upload"
                        class="upload-demo"
                        :auto-upload="false"
                        :headers="{
                            authorization:$store.state.admin.token
                        }"
                        action="/ele/goodsList"
                        :limit="1"
                        list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('update:goods-list-visible',false)">取 消</el-button>
            <el-button type="primary" @click="goodsListSubmit">提  交</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "GoosList",
        props:["goodsListVisible"],
        data(){
            return {
                goodsListForm:{
                        price:"",
                        isTop:false,
                        goodsName:"",
                        shopTypeId:"",
                        shopId:"",
                    goodsId:"",
                    ishot:false
                }
            }
        },
        methods:{
            success(res){
            if(res.ok===1)
                this.$store.dispatch("getGoodsList");
                this.$emit('update:goods-list-visible',false)
            },
            goodsListSubmit(){
                this.$refs.upload.submit();
            }
        },
        mounted(){
            if(this.shopTypeId){this.goodsListForm.shopTypeId = this.shopTypeId}


            this.$store.dispatch("getAllShopTypeList");
        }
    }
</script>

<style scoped>

</style>